<template>
  <view class="content">
    <view class="header" :style="'padding-top:' + statusBarHeight + 'px;'" >
      <view style="height:560rpx;">
        <!-- <u-swiper :height="448" :autoplay="false" :list="listimage" mode="none" ></u-swiper> -->
        <swiper style="height: 560rpx;" :current="currentIndex" @change="swiperChange">
          <swiper-item style="height:100%;" v-for="(item, index) in arrimage" :key="index" >
            <view class="box" v-if="item.type == 1" style="height:100%;">
              <view style="display:flex; justify-content: space-between;">

                <view>大傻春</view>
                <view style="font-size: 24rpx;">（设备：SHBFHUFH）</view>
              </view>
              <view style="display: flex; margin-top:40rpx;">
                <view style="width: 100%; height:280rpx;">
                  <l-echart :ref="'chartRef' + index" @finished="init3"></l-echart>
                </view>

              </view>
              <view style="display: flex; justify-content: space-between; margin-top:40rpx;">
                <view>
                  <view style="display:flex;">
                    <view
                      style="width:12rpx;height:12rpx;background-color:red;border-radius:50%; margin-right:8rpx;margin-top:16rpx;">
                    </view>
                    <view>
                      <view style="font-size: 24rpx;">高压</view>
                      <view style="font-size: 20rpx;">60-100次/分</view>
                    </view>
                  </view>
                  <view
                    style="font-weight: 500; font-size: 32rpx; color: #333333;margin-top:8rpx;font-family: PingFang SC, PingFang SC;">
                    70次/分 正常
                  </view>
                </view>
                <view>
                  <view style="display:flex;">
                    <view
                      style="width:12rpx;height:12rpx;background-color:red;border-radius:50%; margin-right:8rpx;margin-top:16rpx;">
                    </view>
                    <view>
                      <view style="font-size: 24rpx;">低压</view>
                      <view style="font-size: 20rpx;">60-100次/分</view>
                    </view>
                  </view>
                  <view
                    style="font-weight: 500; font-size: 32rpx; color: #333333;margin-top:8rpx;font-family: PingFang SC, PingFang SC;">
                    70次/分 正常
                  </view>
                </view>
                <view>
                  <view style="display:flex;">
                    <view
                      style="width:12rpx;height:12rpx;background-color:red;border-radius:50%; margin-right:8rpx;margin-top:16rpx;">
                    </view>
                    <view>
                      <view style="font-size: 24rpx;">心率</view>
                      <view style="font-size: 20rpx;">60-100次/分</view>
                    </view>
                  </view>
                  <view
                    style="font-weight: 500; font-size: 32rpx; color: #333333;margin-top:8rpx;font-family: PingFang SC, PingFang SC;">
                    70次/分 正常
                  </view>
                </view>
              </view>
            </view>
            <view @tap="gostanding" v-if="item.type == 0" class="lastBox">
              <p class="Xuser"> <span class="jia">+</span> 绑定新用户</p>
            </view>
          </swiper-item>
        </swiper>
      </view>

    </view>

    <!-- 健康监测 -->
    <view class="HealthCenter">
      <view class="HealthCenterTop">
        <view class="First">
        </view>
        <view class="Second">
          健康监测
        </view>
      </view>
      <view @tap="gomyhome" class="gotomyhome">
        <image @tap="gomyhome" src="../../static/image/pagesHealth/gohomebg.png" mode="scaleToFill" />
      </view>
    </view>
    <!-- 健康中心 -->
    <view class="HealthCenter">
      <view class="HealthCenterTop">
        <view class="First">
        </view>
        <view class="Second">
          健康中心
        </view>
      </view>
      <view class="HealthContent">
        <view class="FirstContent" @tap="goHistory(item)" v-for="(item, index) in arr" :key="index">
          <image v-if="index == 0" class="" src="../../static/image/pagesHealth/tabone.png"></image>
          <image v-if="index == 1" class="" src="../../static/image/pagesHealth/tabtwo.png"></image>
          <view class="Box">
            <view class="hospital">
              {{ item.merchantSmallName }}
            </view>
            <view class="assess">
              专业评估 分级评测
            </view>
          </view>
        </view>

      </view>
    </view>
    <!-- 穿戴设备 -->
    <view class="HealthCenter">
      <view class="HealthCenterTop">
        <view class="First">
        </view>
        <view class="Second">
          穿戴设备
        </view>
      </view>
      <!-- 瀑布流式布局 -->
      <view class="Streaming">
        <u-waterfall v-model="arrList" ref="uWaterfall">
          <template v-slot:left="{ leftList }">
            <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @tap="goDetail(item)">
              <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
              <u-lazy-load threshold="-450" border-radius="8" :image="item.merchantHead" :index="index"></u-lazy-load>
              <view class="demo-title">
                {{ item.merchantName }}
              </view>
              <!-- <view class="demo-shop">
                <view class="demo-shop-Left">
                  <text>￥</text>
                  <text>{{ item.merchantSalesVolume }}</text>
                </view>
                <view class="demo-shop-Right">
                  <text style="font-size: 20rpx;">￥</text>
                  <text>{{ item.merchantSalesVolume }}</text>
                </view>
              </view> -->
            </view>
          </template>
          <template v-slot:right="{ rightList }">
            <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @tap="goDetail(item)">
              <u-lazy-load threshold="-450" border-radius="8" :image="item.merchantHead" :index="index"></u-lazy-load>
              <view class="demo-title">
                {{ item.merchantName }}
              </view>
              <!-- <view class="demo-shop">
                <view class="demo-shop-Left">
                  <text>￥</text>
                  <text>{{ item.merchantSalesVolume }}</text>
                </view>
                <view class="demo-shop-Right">
                  <text style="font-size: 20rpx;">￥</text>
                  <text>{{ item.merchantSalesVolume }}</text>
                </view>
              </view> -->
            </view>
          </template>
        </u-waterfall>
      </view>
    </view>
  </view>
</template>

<script>
import { selectLabelList, selectMerchantList ,onlyoneselectMerchant } from '@/api/common'

import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
let that = this
export default {
  data() {
    return {
      onlyone:true,
      statusBarHeight: 0,
      loadStatus: 'loadmore',
      arrList: [],
      heartClass: [
        {
          name: "心率",
          nums: "60-100/分",
          tody: "70次/分 正常",
          color: '#ED2B1F'
        },
        {

          name: "心率",
          nums: "60-100/分",
          tody: "70次/分 正常",
          color: '#FED74F'
        },
        {

          name: "心率",
          nums: "60-100/分",
          tody: "70次/分 正常",
          color: '#267BFF'
        },
      ],
      currentIndex: 0,
      arrimage: [
        {
          type: 1,

        },
        {
          type: 1,

        },
        {
          type: 1,

        },
        {
          type: 0,
        },

      ],
      arr: [],
      pageNum: 1,
      pageSize: 6,
      pagesStatus: false,
      // 心率
      optiontwo: {
        series: [
          {
            type: 'gauge',
            radius: '100%', // 外层仪表盘的半径
            startAngle: 240,
            endAngle: -60,
            pointer: { show: false },

            progress: {
              width: 5,
              show: true,
              roundCap: true,
              itemStyle: {
                color: '#ED2B1F'
              },

            },
            axisLine: {
              lineStyle: {
                width: 5,
                color: [[1, '#FFE9DC']] // 外层仪表盘的颜色
              }
            },
            splitLine: {
              show: false // 不显示分隔线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false,
            },
            data: [{ value: 75 }]
          },
          {
            type: 'gauge',
            radius: '80%', // 内层仪表盘的半径
            startAngle: 240,
            endAngle: -60,
            pointer: { show: false },
            progress: {
              width: 5,
              show: true,
              roundCap: true,
              itemStyle: {
                color: '#FED74F'
              }
            },
            axisLine: {
              lineStyle: {
                width: 5,
                color: [[1, '#FEF4D1']] // 内层仪表盘的颜色
              }
            },
            splitLine: {
              show: false // 不显示分隔线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false,
            },
            data: [{ value: 50 }]
          },
          {
            type: 'gauge',
            radius: '60%', // 最内层仪表盘的半径
            startAngle: 240,
            endAngle: -60,
            pointer: { show: false },
            progress: {
              width: 5,
              show: true,
              roundCap: true,
              itemStyle: {
                color: '#2196f3'
              },


            },
            axisLine: {
              lineStyle: {
                width: 5,
                color: [[1, '#D6E6FF']] // 最内层仪表盘的颜色
              }
            },
            splitLine: {
              show: false // 不显示分隔线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false,
            },
            data: [{ value: 25 }]
          }
        ]
      },
      option: {
        // 名字
        title: {
          text: '运动趋势',
          textStyle: {
            color: 'white',
            fontSize: 12
          }
        },
        // 图表的间距
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          height: '80%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: 'white'  // 设置x轴线颜色为红色
              }
            },
            data: [{
              value: '0点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '6点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '12点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '18点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '24点',
              textStyle: {
                color: 'white'
              }
            },]
          }
        ],
        yAxis: [
          {
            // title: '我的设备',

            show: true,
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white' // 设置 Y 轴的颜色为红色
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置左侧y轴数据颜色为红色
              },
            },
          }
        ],
        series: [
          {
            type: 'line',
            // 是否平滑
            smooth: true,
            // 去掉标记点
            showSymbol: false,

            // 数据的区域
            // areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //         offset: 0,
            //         color: 'white'
            //     },
            //     {
            //         offset: 1,
            //         color: 'rgb(0, 0, 0, 0)'
            //     }
            //     ])
            // },
            lineStyle: {
              color: 'white', // 设置曲线的颜色为绿色
              width: 1
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
        ]
      },
      option1: {
        // 名字
        title: {
          text: '心率',
          textStyle: {
            color: 'white',
            fontSize: 12
          }
        },
        // 图表的间距
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          height: '80%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: 'white'  // 设置x轴线颜色为红色
              }
            },
            data: [{
              value: '0点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '6点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '12点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '18点',
              textStyle: {
                color: 'white'
              }
            }, {
              value: '24点',
              textStyle: {
                color: 'white'
              }
            },]
          }
        ],
        yAxis: [
          {

            // title: '我的设备',
            show: true,
            type: 'value',

            axisLine: {
              show: true,
              lineStyle: {
                color: 'white' // 设置 Y 轴的颜色为红色
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置左侧y轴数据颜色为红色
              },
            },
          }
        ],
        series: [
          {
            type: 'line',
            // 是否平滑
            smooth: true,
            // 去掉标记点
            showSymbol: false,

            // 数据的区域
            // areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //         offset: 0,
            //         color: 'white'
            //     },
            //     {
            //         offset: 1,
            //         color: 'rgb(0, 0, 0, 0)'
            //     }
            //     ])
            // },
            lineStyle: {
              color: 'white', // 设置曲线的颜色为绿色
              width: 1
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
        ]
      },
      latAndLong: '',
      consigneeLng: '',
      consigneeLat: ''
    }
  },
  onReady() {
  },
  onShow() {
    that = this
    this.gettabslist()
    that.latAndLong = uni.getStorageSync('latAndLong')
    this.consigneeLng = that.latAndLong.longitude
    this.consigneeLat = that.latAndLong.latitude

  },
  onLoad() {
    
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', that.statusBarHeight);
    

  },

  methods: {
    toJSON() {
      // 返回一个对象，这个对象将作为 JSON 字符串输出
      return {
        // 你的数据属性
      };
    },
    async init() {
      // chart 图表实例不能存在data里
      const BloodChart = await this.$refs.Motion.init(echarts)
      BloodChart.setOption(this.option)
    },
    async init1() {
      // chart 图表实例不能存在data里
      const BloodCharttwo = await this.$refs.Motion1.init(echarts)
      BloodCharttwo.setOption(this.option1)
    },
    async init3() {
      for (let i = 0; i < this.arrimage.length - 1; i++) {
        let refName = 'chartRef' + i
        let chartInstance = this.$refs[refName][0];
        // 调用 init 方法，注意这里可能不需要 await，除非 init 是异步的  
        let BloodChartthree = await chartInstance.init(echarts);
        // 设置 ECharts 选项  
        BloodChartthree.setOption(this.optiontwo);
      }
      // chart 图表实例不能存在data里
    },
    gettabslist() {
      let obj = {
        merchantTakeout: 2
      }
      selectLabelList(obj).then(res => {
        this.arr = res.data
        console.log('看看健康', this.arr)
        this.gitWaterfall()
      })
    },
    
    gitWaterfall() {
      let obj = {
        merchantId: 100
      }
      onlyoneselectMerchant(obj).then(res => {
        console.log('看看健康检测', res)
        if(this.onlyone){
          console.log('检测内容')
          this.onlyone=false
          this.arrList.push(res.data)
        }
      })
    },

    // 口腔医院
    goHistory(e) {
      uni.navigateTo({
        url: '/pagesDelivery/deliverySearchResult?latAndLong=' + JSON.stringify(this.latAndLong) + '&tabbarId=' + e.merchantTypeId + '&merchantTakeout=2'
      })
    },
    // 身份证信息
    gostanding() {
      uni.navigateTo({
        url: '/pagesHealth/standing'
      })
    },

    // 穿戴设备详情
    goDetail(item) {
      // uni.navigateTo({
      //   url: '/pagesHealth/HealthEquipment?searchValue=' + item.merchantSmallName
      // })
      uni.navigateTo({
          url: `/pagesAgriculture/agricultureDetail?id=${item.merchantId}`
      })
    },

    //左右滑动选择用户设备
    swiperChange(e) {
      console.log(e, 'ee');
      this.currentIndex = e.detail.current
    },

    healthDetails() {
      uni.navigateTo({
        url: '/pagesHealth/healthDetails'
      })
    },

    gomyhome() {
      uni.navigateTo({
        url: '/pagesHealth/healthTest'
      })
    }
  },
  onReachBottom() {
    console.log("触底");
    // // 模拟的请求数据
    // if (this.pagesStatus) {
    //   this.pageNum++
    //   this.gitWaterfall()
    // }
  },
}
</script>

<style scoped lang="scss">
.content {
  padding: 0 32rpx 18rpx 32rpx;
  background: #F5F5F5;

  .header {

    margin-bottom: 15rpx;


    // image {
    //     width: 100%;
    //     height: 448rpx;
    //     margin-top: 40rpx;
    //     border-radius: 12rpx;
    // }
    .box {
      width: 100%;
      height: 100%;
      background-color: white;
      padding: 32rpx;
      border-radius: 28rpx;

      .body {
        width: 268rpx;
        height: 48rpx;
        background: #FAFAFF;
        border-radius: 12rpx;
        margin-top: 10rpx;
        line-height: 48rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        text-align: center;
      }

      .heartrate {
        font-family: DIN, DIN;
        font-weight: bold;
        font-size: 40rpx;
        color: #333333;
      }
    }

    .lastBox {
      width: 100%;
      height: 100%;
      background-color: #FFFFFF;
      color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-radius: 12rpx 12rpx 12rpx 12rpx;

      .Xuser {
        color: #D12C25;
        font-weight: 600;
      }

      .jia {
        background: #D12C25;
        color: #FFFFFF;
        padding: 0rpx 4rpx 0rpx 4rpx;
        margin-right: 10px;
      }
    }
  }

  .heartRate {
    display: flex;
    justify-content: space-around;
    margin-top: 18rpx;

    .heartRateImg {
      width: 164rpx;
      height: 246rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-top: 18rpx;
      padding: 26rpx 20rpx;

      .heartTop {
        display: flex;
        align-items: center;

        text {
          margin-left: 8rpx;
          font-size: 28rpx;
        }

        .red {
          color: #f00;
        }

        .blue {
          color: #0057FF;
        }

        .green {
          color: #16D356;
        }

        .yellow {
          color: #FFC123;
        }

        image {
          width: 28rpx;
          height: 28rpx;
        }
      }

      .nums {
        margin-top: 8rpx;
        font-weight: Bold;
        font-family: PingFang SC-Bold;
        font-size: 32rpx;

        .small {
          font-weight: Bold;
          font-family: PingFang SC-Bold;
          font-size: 20rpx;
        }
      }

      .tody {
        width: 56rpx;
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 33rpx;
        text-align: justified;
        font-style: normal;
        text-transform: none;
      }

      .bottom {
        image {
          width: 124rpx;
          height: 62rpx;
        }
      }
    }
  }

  .Equipment {
    background: linear-gradient(96deg, #FF5C16 0%, #D40000 100%);
    border-radius: 12rpx;
    padding: 24rpx;
  }

  .Heal {
    display: flex;
    align-items: center;
    margin: 18rpx 0;

    .First {
      border-radius: 1998rpx;
      width: 8rpx;
      height: 24rpx;
      background-color: #000;
      margin-right: 8rpx;
    }

    .Second {
      font-weight: bold;
      font-size: 32rpx;
    }
  }

  .HealthCenter {
    margin-top: 18rpx;

    .HealthCenterTop {
      display: flex;
      align-items: center;

      .First {
        border-radius: 1998rpx;
        width: 8rpx;
        height: 24rpx;
        background-color: #000;
        margin-right: 8rpx;
      }

      .Second {
        font-weight: bold;
        font-size: 32rpx;
      }
    }

    .HealthContent {
      display: flex;
      justify-content: space-between;
      margin-top: 18rpx;
      color: #fff;

      .FirstContent {
        padding: 24rpx;
        display: flex;
        width: 334rpx;
        height: 140rpx;
        background-color: #40D4A0;
        align-items: center;
        border-radius: 8rpx;

        .Box {
          margin-left: 18rpx;

          .hospital {
            margin-bottom: 24rpx;
            font-size: 28rpx;
            font-weight: Bold;
          }

          .assess {
            font-size: 24rpx;
          }
        }
      }

      .SecondContent {
        padding: 24rpx;
        display: flex;
        width: 334rpx;
        height: 140rpx;
        background-color: #4CD3E6;
        align-items: center;
        border-radius: 12rpx;

        // margin-right: 18rpx;
        .Box {
          margin-left: 18rpx;

          .hospital {
            margin-bottom: 24rpx;
            font-size: 28rpx;
            font-weight: Bold;
          }

          .assess {
            font-size: 24rpx;
          }
        }
      }

      image {
        width: 58rpx;
        height: 58rpx;
        // margin-top: 38rpx;
      }
    }

    .gotomyhome {
      width: 690rpx;
      height: 276rpx;
      margin-top: 28rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .demo-warter {
      border-radius: 8rpx;
      margin: 10rpx;
      background-color: #ffffff;
      padding: 16rpx;
      position: relative;
    }

    .demo-image {
      width: 100%;
      border-radius: 8rpx;
    }

    .demo-title {
      font-size: 30rpx;
      margin-top: 10rpx;
      color: #1A1A1A;
      font-weight: bold;
      font-family: PingFang SC, PingFang SC;
    }

    .demo-shop {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .demo-shop-Left {
        font-size: 28rpx;
        color: $u-tips-color;
        margin-top: 10rpx;
        text-decoration-line: line-through;
      }

      .demo-shop-Right {
        color: #E33434;
        font-weight: Bold;
      }

    }
  }
}
</style>
